<template>
  <div class="buyCard">
    <nav-bar :left-arrow="true" :title='title' :isGo='isGo'></nav-bar>
    <div class="contain">
      <div class="card" v-for="(item, index) in cardList" :key='item.index'>
        <div class="left">
          <img src="../../assets/car.png" alt="">
        </div>
        <div class="right">
          <p>{{item.title}}</p>
          <span>{{item.detail}}</span>
          <div class="price">
            <span>{{item.newMoney}}元</span>
            <del>{{item.oldMoney}}元</del>
          </div>
        </div>
        <div class="btn">
          <van-button type='info' size="small" @click="toBuyCard(item.couponId, index)">立即购买</van-button>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { mapGetters } from 'vuex'
import NavBar from '@/components/NavBar'
// , buyCoupon
import { getCoupon } from '@/api/coupon'
import { myCoupon } from '@/api/mine'
import req from '@/utils/request'

export default {
  name: 'BuyCard',
  data () {
    return {
      title: '购买骑行卡',
      cardList: [],
      index: 0,
      isGo: false,
      myCoupon: []
    }
  },
  computed: {
    ...mapGetters([
      'userInfo'
    ])
  },
  components: {
    NavBar
  },
  created () {
    // 获取数据
    this.getCardList()
    this.getMyCoupon()
  },
  methods: {
    async getMyCoupon () {
      const params = {
        userId: this.userInfo.userId
      }
      const { data: res } = await myCoupon(params)
      if (res.data !== null) {
        this.myCoupon = res.data
      }
      console.log(this.myCoupon)
    },
    async getCardList () {
      const { data: res } = await getCoupon({})
      this.cardList = res.rows
      console.log(this.cardList)
    },
    toBuyCard (couponId, index) {
      if (this.myCoupon.length === 0) {
        console.log('没有优惠卷')
        const params = {
          userId: this.userInfo.userId,
          couponId: couponId
        }
        req.postJson('/buyCoupon', params).then(res => {
          console.log(res)
          this.toPayZfb()
        })
      } else {
        console.log('有优惠卷')
        for (var i = 0; i < this.myCoupon.length; i++) {
          if (this.myCoupon[i].couponId === couponId) {
            console.log(this.myCoupon[i].couponId, 111)
            this.$notify({ type: 'danger', message: '您已购买该优惠卷，请勿重复购买' })
          } else {
            const params = {
              userId: this.userInfo.userId,
              couponId: couponId
            }
            req.postJson('/buyCoupon', params).then(res => {
              console.log(res)
              this.toPayZfb()
            })
          }
        }
      }
    },
    async toPayZfb () {
      console.log(typeof this.index)
      if (this.cardList[this.index]) {
        const viewUrl = `http://localhost:8080/buyCard?userId=${this.userInfo.userId}`
        const money = this.cardList[this.index].newMoney
        const name = this.cardList[this.index].title
        const detail = this.cardList[this.index].detail
        window.location.href = `http://localhost:8082/toPay?viewUrl=${viewUrl}&money=${money}&name=${name}&detail=${detail}`
      }
    }
  }
}
</script>

<style scoped lang='scss'>
.card{
  display: flex;
  width: 90%;
  margin: 20px 5%;
  border-radius: 5px;
  background-color: rgb(224, 252, 247);
  .right{
    margin-left: 10px;
  }
  p{
    font-size: 18px;
    color: rgb(128, 125, 125);
    font-weight: bold;
    margin: 10px 0;
  }
  span{
    font-size: 12px;
    color: #ccc;
  }
  .price{
    span{
      font-size: 16px;
    }
    del{
      font-size: 12px;
      color: #ccc;
    }
  }
}
.btn{
  .van-button{
    margin-top: 45%;
    margin-left: 10px;
  }
}
.right{
  width: 155px;
}
</style>
